<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./js/jquery.js" type="text/javascript"></script>
        <script src="./js/easyvalidator/easy_validator.pack.js" type="text/javascript"></script>
        <script src="./js/easyvalidator/jquery.bgiframe.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                    $(".item-1").click(function(){
                        var t = $(this).parents(".level-1").html();
                        alert(t);

                        });
                    $("#close-login").click(function(){
                            $("#login").hide();
                        });
                    $("#close-reg").click(function(){
                            $("#reg").hide();
                        });
                    });

</script>
<script type="text/javascript">
    var isExtendsValidate = true;	//如果要试用扩展表单验证的话，该属性一定要申明
    function extendsValidate(){	//函数名称，固定写法

        //密码匹配验证
        if( $('#password1').val() == $('#password2').val() ){	//匹配成功
            $('#password2').validate_callback(null,"sucess");	//此次是官方提供的，用来消除以前错误的提示
        }else{//匹配失败
            $('#password2').validate_callback("密码不匹配","failed");	//此处是官方提供的API，效果则是当匹配不成功，pwd2表单 显示红色标注，并且TIP显示为“密码不匹配”
            return false;
        }

        //如果觉得官方提供的错误提示UI API 过于复杂，完全可以选择自定义，可以试试下面注释掉的代码

        //if( $('#password1').val() != $('#password2').val() ){	//匹配不成功
        //alert("密码不匹配");
        //return false;
        //}

        //checkbox 验证，必须选择一个checkbox
     //   if($("[name='lover']:checked").length < 1){
       //     alert("必须得有一个lover!")
   
         //   return false;
        //}


    }

</script>

<link href="validate.css" type="text/css" rel="stylesheet"></link>
<title></title>
</head>

<body>
    <ul class="level-1">
        <li class="item-i">I</li>
        <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
        </li>
        <li class="item-iii">III</li>
    </ul>








    <div id="reg" style="background-color:white;position:fixed;z-index:201;left:5px;top:60px;border:1px solid black;padding:10px 10px 10px 10px;">
<h3 style="cursor: move;font-size:1em;margin:5px 0 25px;">
<em style="float:left;">注册</em>
<span>
<a title="关闭" id="close-reg" style="float:right;background:url(./image/close.jpg) no-repeat scroll 0 0 transparent;text-indent:-9999px;width:20px;hight:20px;overflow:hidden;"  href="javascript:;" >关闭</a></span>
</h3>
<br style="clear:both;"/>
       
        <form action="register" method="post" style="float:left;border-right:1px solid black;margin-right:10px;padding-right:10px;">
            <label style="display:block;float:left;width:5em;margin-bottom:10px;">姓名:</label>
            <input type="text" id="name" reg="^[\u4e00-\u9fa5]+$|[a-z]+$" style="margin-bottom:10px;" tip="输入你的名字"  url="check_exist"/><br />
            <label  style="display:block;float:left;width:5em;margin-bottom:10px;">密码:</label>
            <input type="password" id="password1" maxlength="20" reg="[a-zA-Z0-9]+$" tip="密码为字母或者数字组合" style="margin-bottom:10px;"/><br />
            <label  style="display:block;float:left;width:5em">再次输入:</label><input type="password" id="password2" maxlength="20" reg="[a-zA-Z0-9]+$" tip="再次输入"/><br />
            <input style="margin-top:20px;" id="submit" value="提交" type="submit" />
        </form>
        <div style="float:right;"> 
            已有帐号?<br/>现在<a href="#">登陆</a>
        </div>
    </div>





    
    <div id="login" style="background-color:white;position:fixed;z-index:201;left:405px;top:60px;border:1px solid black;padding:10px 10px 10px 10px;">
<h3 style="cursor: move;font-size:1em;margin:5px 0 25px;">
<em style="float:left;">登陆</em>
<span>
<a title="关闭" id="close-login" style="float:right;background:url(./image/close.jpg) no-repeat scroll 0 0 transparent;text-indent:-9999px;width:20px;hight:20px;overflow:hidden;"  href="javascript:;" >关闭</a></span>
</h3>
<br style="clear:both;"/>
       
        <form action="login" method="post" style="float:left;margin-right:4px;padding-right:10px;">
            <label style="display:block;float:left;width:5em;margin-bottom:10px;">姓名:</label>
            <input type="text" id="name" reg="^[\u4e00-\u9fa5]+$|[a-z]+$" style="margin-bottom:10px;" tip="输入你的名字"  url="check_exist"/><br />
            <label  style="display:block;float:left;width:5em">密码:</label>
            <input type="password" id="password" maxlength="20" reg="[a-zA-Z0-9]+$" url="check_password" tip="密码为字母或者数字组合"/><br />
            <input style="margin-top:20px;" id="submit" value="登陆" type="submit" />
        </form>

    </div>
</div>
 </div>

</body>
</html>
